<script setup lang="ts">
import type { Component } from 'vue';
import { computed, reactive, ref } from 'vue';
import { useMessage } from 'naive-ui';
import type { MenuOption } from 'naive-ui';
import { useThemeStore } from '@/store/modules/theme';
import LookForward from '@/components/custom/look-forward.vue';
import ThirdParty from './components/third-party.vue';
import Account from './components/account.vue';
import OperLog from './components/oper-log.vue';
import SecuritySetting from './components/security-setting.vue';
import LoginLog from './components/login-log.vue';

const themeStore = useThemeStore();

const message = useMessage();
const menuOptions: MenuOption[] = reactive([
  {
    type: 'group',
    label: '账户设置',
    key: 'account',
    children: [
      {
        label: '个人信息',
        key: 'account-info'
      },
      {
        label: '第三方绑定',
        key: 'third-party'
      }
    ]
  },
  {
    key: 'divider-1',
    type: 'divider'
    // props: {
    //   style: {
    //     marginLeft: '32px'
    //   }
    // }
  },
  // {
  //   label: '通知设置',
  //   key: 'notice'
  // },
  {
    type: 'group',
    label: '安全管理',
    key: 'account',
    children: [
      {
        label: '安全设置',
        key: 'security-setting'
      },
      {
        label: '操作日志',
        key: 'oper-log'
      },
      {
        label: '登录日志',
        key: 'login-log'
      }
    ]
  }
]);
type UserCenter = 'account-info' | 'third-party' | 'oper-log' | 'login-log' | 'security-setting';
const currentKey = ref<UserCenter>('account-info');
const handleUpdateValue = (key: string) => {
  currentKey.value = key as UserCenter;
};
const componentMap: Record<UserCenter, Component> = {
  'account-info': Account,
  'third-party': ThirdParty,
  'oper-log': OperLog,
  'login-log': LoginLog,
  'security-setting': SecuritySetting
};
const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';
  return themeStore.darkMode ? '' : COLOR_WHITE;
});
const activeModule = computed(() => componentMap[currentKey.value as UserCenter]);
</script>

<template>
  <NGrid cols="24" item-responsive responsive="screen" class="overflow-hidden">
    <NGridItem span="0 s:0 m:3 l:3 xl:3 2xl:3" :style="{ backgroundColor: bgColor }" class="border-right">
      <NMenu :value="currentKey" :options="menuOptions" @update:value="handleUpdateValue" />
    </NGridItem>
    <NGridItem span="24 s:24 m:21 l:21 xl:21 2xl:21" class="max-height" :style="{ backgroundColor: bgColor }">
      <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
        <component :is="activeModule" />
      </Transition>
    </NGridItem>
  </NGrid>
</template>

<style scoped lang="scss">
.border-right {
  border-right: 1px;
  border-style: solid;
  border-color: var(--un-default-border-color, #e5e7eb);
}
</style>
